<!DOCTYPE html>
<html lang="zh-CN">
<!--引入thymeleaf标签-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>学生信息</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!--  css属性-->
  <style>
    .main {
      margin-top: 60px;
    }

    .main select {
      width: 190px !important;
    }

    .table td {
      text-align: center;
      line-height: 25px !important;
    }

    article {
      margin-top: 20px;
      margin-bottom: 20px;
    }

    table {
      margin-bottom: 0px !important;
    }
  </style>

</head>

<body>
  <!-- 导航栏: 头部信息（测试项目 学生信息  录入信息  关于  联系）  点击跳转分页 -->
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">测试项目</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
<!--          <li class="active"><a href="#">学生信息</a></li>-->
          <li class="active"><a href="/index">学生信息</a></li>
          <li><a href="/look">录入学生</a></li>
          <li><a href="#about">关于</a></li>
          <li><a href="#contact">联系</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="container main">

    <!-- 条件搜索 -->
    <article>
      <form class="form-inline" action="/index/pageHel" method="GET">
        <div class="row">
          <div class="col-md-3">
            <label for="exampleInputName2">名称：</label>
            <input type="text" class="form-control" th:value="${searchName}" id="exampleInputName2" placeholder="请输入名称" name="cname">
          </div>
          <div class="col-md-3">
            <label for="sel1">班级:</label>
            <!--            返回的是一个id集合（使用thymeleaf遍历）-->
            <!--   <select name="gid"  class="form-control" id="recipient-class" style="width:100% !important">
                 <option th:each="user : ${users}" th:text="user.gid"></option>
               </select>-->
            <select  name="gradeId"  class="form-control" id="recipient-class" style="width:100% !important">
              <option class="cha" th:selected="${grad.id==searchid}" th:each="grad : ${grade}" th:value="${grad.id}"  th:text="${grad.name}" ></option>
            </select>
          </div>
          <div class="col-md-3">
            <button type="submit"  class="btn btn-primary">查询学生</button>
          </div>
        </div>
      </form>
    </article>
    <!-- 数据表格 -->
    <table class="table table-bordered table-hover table-striped" id="gwc">
      <tr>
        <td width="10%">学号</td>
        <td width="10%">姓名</td>
        <td width="10%">性别</td>
        <td width="15%">电话</td>
        <td width="10%">班级</td>
        <td width="10%">选修</td>
        <td>地址</td>
        <td width="15%">操作</td>
      </tr>
      <tr th:each="user : ${pageInfo.list}">
        <td th:text="${user.id}"></td>
        <td th:text="${user.name}"></td>
        <td th:text="${user.sex}"></td>
        <td th:text="${user.phone}"></td>
        <td th:text="${user.gName}"></td>
        <td th:text="${user.eName}"></td>
        <td th:text="${user.address}"></td>
        <td>
          <!--
                   修改直接有模态框
                   删除调用方法就行了
          -->
          <div class="action">
            <button class="btn btn-primary btn-xs deleteBtn" data-toggle="modal"  data-target="#editStudentModal" onclick="huixian()" th:onclick="myHx('[[${user.id}]]')">修改</button>
            <button class="btn btn-danger btn-xs deleteBtn" th:onclick="myFunction('[[${user.id}]]')">删除</button>
          </div>
        </td>
      </tr>
    </table>
    <!-- 分页信息 -->
    <nav aria-label="Page navigation">
      <ul class="pagination">
        <li>
<!--          pageInfo.prePage          第一页
              pageInfo.nextPage        最后一页
              pageInfo.pages           获取总页数
              aria-label="Previous"    上一步
              aria-label="Next"       下一步
              -->
          <!--上一页-->
          <a th:if="${searchName}!=null" th:href="@{'http://localhost:8080/index/pageHel?page='+${pageInfo.prePage}+'&cname='+${searchName}+'&gradeId='+${searchid}}"  aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>

          <a th:if="${searchName}==null" th:href="@{'http://localhost:8080/index/pageHel?page='+${pageInfo.prePage}}"  aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
<!--        <li class="active"><a href="#">1</a></li>-->
        <li th:class="${pageInfo.pageNum == i} ? 'active' : '' " th:each="i:${#numbers.sequence(1, pageInfo.pages)} " >
<!--          +'&cname='+${searchName}+'&gradeId='+${searchid}-->
<!--
             th:if="${searchName} eq null  ? '':'&cname='+${searchName} "
             th:if="${searchid} eq 0 ? '':'&gradeId='+${searchid}"
-->
           <!--th:if="${searchName == null} ? '' : '&cname='+${searchName}"
 th:if="${searchid == null} ? '' : '&gradeId='+${searchid}"
          页面的页数-->
            <a th:if="${searchName} != null" th:text="${i}" th:href="@{'http://localhost:8080/index/pageHel?page='+${i}  +'&cname='+${searchName}+'&gradeId='+${searchid}}" />
            <a th:if="${searchName} == null" th:text="${i}" th:href="@{'http://localhost:8080/index/pageHel?page='+${i}}"/>
        </li>
        <li>
<!--下一页-->
          <a th:if="${searchName != null}" th:href="@{'http://localhost:8080/index/pageHel?page='+${pageInfo.nextPage}+'&cname='+${searchName}+'&gradeId='+${searchid}}" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
          <a th:if="${searchName == null}" th:href="@{'http://localhost:8080/index/pageHel?page='+${pageInfo.nextPage}}" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        <li><span th:text="'共'+${pageInfo.pages}+'页'"></span></li>
        </li>
      </ul>
    </nav>
    <!-- 修改学生信息模态框内容 -->
    <div class="modal fade  bs-example-modal-lg" id="editStudentModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog  modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">修改学生信息</h4>
          </div>
<!--         表单 -->
          <div class="modal-body">
            <form id="updateUser" action="/updateUser" method="post">
              <input type="hidden" name="id" id="testName">
              <div class="form-group">
                <label for="recipient-name" class="control-label">姓名:</label>
                <input type="text" class="form-control" id="recipient-name" name="name">
              </div>
              <div class="form-group">
                <label for="recipient-sex" class="control-label">性别:</label>
                <input type="text" class="form-control" id="recipient-sex" name="sex">
              </div>
              <div class="form-group">
                <label for="recipient-phone" class="control-label">电话:</label>
                <input type="text" class="form-control" id="recipient-phone" name="phone">
              </div>
              <div class="form-group">
                <label for="recipient-class" class="control-label">班级:</label>
                <select name="gName"  class="form-control" id="recipient-class" style="width:100% !important">
                  <option  class="classItem" th:each="grad : ${grade}"  th:value="${grad.id}" th:text="${grad.name}"></option>
                </select>
              </div>
              <div class="form-group">
                <label for="recipient-class" class="control-label">选修:</label>
                <select name="eName" class="form-control" id="recipient-class21" style="width:100% !important">
                  <option class="classEle" th:each="el : ${elective}"  th:value="${el.id}" th:text="${el.name}"></option>
                </select>
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">地址:</label>
                <textarea class="form-control" id="message-text" name="address"></textarea>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-primary">保存</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!--确认删除-->
  </div>
  <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

  <script type="text/javascript">

    function myFunction(id){
      //删除功能========
      // let id = $("#stuid").text();
      // console.log(id)
      $.ajax({
        type : "DELETE", //提交方式
        url : "/delete",//路径
        data : {"id" : id},//数据，这里使用的是Json格式进行传输
        async: false,  //设置为false，则所有的请求均为同步请求，在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行
        success : function(res) {//返回数据根据结果进行相应的处理
          $("#gwc").load(location.href + " #gwc");  //异步刷新
          if (res > 0){
            alert("删除成功!")
            // console.log("删除成功!")
          }else {
            alert("删除失败!")
          }
          //获取下拉框
        /*  if(res && res.length>0){
            var html = [];
            for(var i = 0; i<res.length; i++){
                html.push('<option value="'+res[i].id+'">'+res[i].desc+'</option>');
            }
          }*/
        }
      });
    }
    function chaxun(id) {
      $.ajax({
        type: "get", //提交方式
        url: "/user/koop",//路径
        data: {"id": id},//数据，这里使用的是Json格式进行传输
        async: false,
        success: function (res) {
          $(".cha").removeAttr("selected");    //为什么要先删除这个selected，以为一开始就有下拉框选中，所以要先删除，然后将选中的selected添加
          $(".cha").each(function (i, o) {      //获取下拉框class的值
            if ($(o).val() == res.ch) {          //$(o).val()转换为对象
              $(o).attr("selected", "selected");    //点击这个元素回显到
            }
          })
        }
      })
    }

function myHx(id) {
  $.ajax({
    type: "get", //提交方式
    url: "/select/su",//路径
    data: {"id": id},//数据，这里使用的是Json格式进行传输
    async: false,
    success: function (res) {//返回数据根据结果进行相应的处理

      //给标签赋值   这些值都可以获取，以为已经使用modl加载了，可以把获取
      var obj = document.getElementById("testName");
      obj.value = id;
      var name = document.getElementById("recipient-name");
      name.value = res.name;
      var sex = document.getElementById("recipient-sex");
      sex.value = res.sex;
      var phone = document.getElementById("recipient-phone");
      phone.value = res.phone;
      var address = document.getElementById("message-text");
      address.value = res.address;

      var elective = document.getElementById("recipient-class");
      elective.value = res.gname;

      //$.each("",function(i,n){}) ,是通用的遍历方法,可遍历任何对象,可以遍历对象和数组,需要注意的是它回调函数中的2个参数
      // i 为索引  o 为js中的对象
      //学科名称
      $(".classItem").removeAttr("selected");    //为什么要先删除这个selected，以为一开始就有下拉框选中，所以要先删除，然后将选中的selected添加
      $(".classItem").each(function (i,o) {      //获取下拉框class的值
          if ($(o).val()==res.gradeId){          //$(o).val()转换为对象
            $(o).attr("selected","selected");    //点击这个元素回显到
          }
      })
      $(".classEle").removeAttr("selected");
      //班级名称
      $(".classEle").each(function (k,l) {      //获取下拉框class的值
        if ($(l).val()==res.electiveId){          //$(o).val()转换为对象
          $(l).attr("selected","selected");    //点击这个元素回显到
        }
      })

      //attr("selected","");
      // console.log("#recipient-class option[value="+res.gradeId+"]")
      // $("#recipient-class option[value="+res.gradeId+"]").attr("selected","selected");


      //$("#recipient-class option[value=86870172811396095]").attr("selected","selected");

    /*  console.log(elective.options)
      console.log(elective.value)*/
    }
  })
}

  </script>
</body>

</html>
